<template>
	<view class="p-1">
		<view class="p-4 mb-11">
			<view v-for="(item,index) in list" class="p-3 bg-white rounded-4 mb-5 flex flex-row  flex-y-center"
				:key='index'>
				<view>{{index+1}}</view>
				<view class="h9  p-4 w-90">
					<textarea class="w-100" :maxlength='WEBCONFIG?.section_text + 15' auto-height v-model="item.text"></textarea>
				</view>
				<view>
					<uni-icons type="closeempty" size="16" @click="del(index)"></uni-icons>
				</view>
			</view>
		</view>
		<view class="btn-box flex flex-center">
			<view @click="submit" class="btn-1 rounded-3 flex flex-center p-1 text-white">生成图片</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { $http,$page } from '@/utils'
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import {  useWebConfigStore, useRefs } from "@/stores";
	const list = ref()
	const id = ref(0)
	
	const webConfigStore = useWebConfigStore()
	const { WEBCONFIG } = useRefs(webConfigStore);
	onLoad((option : any) => {
		id.value = option.id
		getList()
	})
	//获取分段结果
	const getList = (() => {
		$http.get('Video/getTextList', { data: { id: id.value } }).then(res => {
			list.value = res.data
		})
	})
	//删除
	const del = ((index : number) => {
		uni.showModal({
			title: '确认删除',
			content: '是否确认删除该段落',
			success(res) {
				if (res.confirm) {
					list.value.splice(index, 1)
				}
			}
		})
	})
	//提交段落生成图片
	const submit = (() => {
		$http.post('Video/createImage', { data: { list: list.value ,id:id.value} }).then(res => {
                $page.redirect('/pages/video/create?id='+id.value)
		})
	})
</script>

<style>
	page {
		background-color: #f1f2f6;
	}

	.btn {
		background-color: #1890ff;
		width: 30%;
		height: 60rpx;
	}

	.btn-box {
        width: 100%;
		position: fixed;
		margin: 0 auto;
		bottom: 0px;
		background-color: #fff;
		border-top: 1px solid #e1e1e1;
		padding: 10px;
		z-index: 999;
	}

	.btn-1 {
		background-color: #1890ff;
		width: 80%;
		height: 80rpx;
	}
	.mb-11{ 
		margin-bottom: 120rpx;
	}
</style>